// 混入样式
@use './variables' as *;

// 清除浮动
@mixin clearfix {
  &::after {
    content: '';
    display: table;
    clear: both;
  }
}

// 文本省略
@mixin ellipsis($lines: 1) {
  @if $lines == 1 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  } @else {
    display: -webkit-box;
    -webkit-line-clamp: $lines;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

// 垂直居中
@mixin center-vertical {
  display: flex;
  align-items: center;
}

// 水平垂直居中
@mixin center {
  display: flex;
  align-items: center;
  justify-content: center;
}

// 绝对定位居中
@mixin absolute-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

// 响应式断点
@mixin respond-to($breakpoint) {
  @if $breakpoint == xs {
    @media (max-width: #{$xs - 1px}) {
      @content;
    }
  }
  @if $breakpoint == sm {
    @media (min-width: #{$sm}) {
      @content;
    }
  }
  @if $breakpoint == md {
    @media (min-width: #{$md}) {
      @content;
    }
  }
  @if $breakpoint == lg {
    @media (min-width: #{$lg}) {
      @content;
    }
  }
  @if $breakpoint == xl {
    @media (min-width: #{$xl}) {
      @content;
    }
  }
  @if $breakpoint == xxl {
    @media (min-width: #{$xxl}) {
      @content;
    }
  }
}

// 按钮样式
@mixin button-variant($color, $background, $border: $background) {
  color: $color;
  background-color: $background;
  border-color: $border;

  &:hover,
  &:focus {
    color: $color;
    background-color: lighten($background, 10%);
    border-color: lighten($border, 10%);
  }

  &:active {
    background-color: darken($background, 10%);
    border-color: darken($border, 10%);
  }

  &.is-disabled,
  &[disabled] {
    color: lighten($color, 30%);
    background-color: lighten($background, 20%);
    border-color: lighten($border, 20%);
    cursor: not-allowed;
  }
}

// 卡片样式
@mixin card {
  background: #fff;
  border-radius: $card-border-radius;
  box-shadow: $card-shadow;
  padding: $card-padding;
  border: 1px solid $border-color-lighter;
}

// 表单组样式
@mixin form-group {
  margin-bottom: $form-item-margin-bottom;

  .form-label {
    display: block;
    font-size: $form-label-font-size;
    color: $form-label-color;
    font-weight: $font-weight-medium;
    margin-bottom: $spacing-small;

    &.required::before {
      content: '*';
      color: $danger-color;
      margin-right: 4px;
    }
  }

  .form-control {
    width: 100%;
    transition: $transition-border, $transition-box-shadow;

    &:focus {
      border-color: $primary-color;
      box-shadow: 0 0 0 2px rgba($primary-color, 0.2);
    }

    &.is-error {
      border-color: $danger-color;

      &:focus {
        box-shadow: 0 0 0 2px rgba($danger-color, 0.2);
      }
    }
  }

  .form-error {
    font-size: $font-size-small;
    color: $danger-color;
    margin-top: $spacing-extra-small;
  }
}

// 状态标签
@mixin status-tag($type: 'default') {
  display: inline-block;
  padding: 2px 8px;
  font-size: $font-size-small;
  border-radius: $border-radius-small;
  font-weight: $font-weight-medium;

  @if $type == 'success' {
    color: $success-color;
    background-color: rgba($success-color, 0.1);
    border: 1px solid rgba($success-color, 0.2);
  } @else if $type == 'warning' {
    color: $warning-color;
    background-color: rgba($warning-color, 0.1);
    border: 1px solid rgba($warning-color, 0.2);
  } @else if $type == 'danger' {
    color: $danger-color;
    background-color: rgba($danger-color, 0.1);
    border: 1px solid rgba($danger-color, 0.2);
  } @else if $type == 'info' {
    color: $info-color;
    background-color: rgba($info-color, 0.1);
    border: 1px solid rgba($info-color, 0.2);
  } @else {
    color: $text-color-regular;
    background-color: $background-color-base;
    border: 1px solid $border-color-base;
  }
}

// 加载动画
@mixin loading-spinner($size: 20px, $color: $primary-color) {
  width: $size;
  height: $size;
  border: 2px solid rgba($color, 0.2);
  border-left-color: $color;
  border-radius: 50%;
  animation: loading-spin 1s linear infinite;
}

@keyframes loading-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

// 表格斑马纹
@mixin table-striped {
  tr:nth-child(even) {
    background-color: $table-row-hover-bg;
  }
}

// 滚动条样式
@mixin scrollbar($width: 6px, $track-color: #f1f1f1, $thumb-color: #c1c1c1) {
  &::-webkit-scrollbar {
    width: $width;
    height: $width;
  }

  &::-webkit-scrollbar-track {
    background: $track-color;
    border-radius: $width / 2;
  }

  &::-webkit-scrollbar-thumb {
    background: $thumb-color;
    border-radius: $width / 2;

    &:hover {
      background: darken($thumb-color, 10%);
    }
  }
}
